<template>
  <view>
    <block v-for="itme in testDriveList" :key="itme.id">
      <view @click="goDetailPage(itme, type)" class="item_box">
        <view class="message">
          <view class="type">{{
            itme.service_type == 0
              ? '维修'
              : itme.service_type == 1
              ? '保养'
              : itme.service_type == 2
              ? '其它'
              : ''
          }}</view>
          <view class="title">{{ title }}</view>
        </view>
        <view class="main_content">
          <view class="right_content">
            <view class="title" v-if="type === '保养'">（车牌号）{{ itme.car_id }}</view>
            <view class="title" v-if="type === '保养'">（预约门店）{{ itme.name }}</view>

            <view class="title" v-if="type === '试驾'">（试驾车型）{{ itme.car_model }}</view>
            <view class="title" v-if="type === '试驾'">（预约门店）{{ itme.company }}</view>
            <!-- <text class="date">申请时间：{{ itme.appoint_time }}</text> -->
            <text class="date" v-if="type === '保养'">预约时间：{{ itme.appoint_time | displayDate }}</text>
            <text class="date" v-if="type === '试驾'">申请时间：{{ itme.create_time | displayDate }}</text>
            <!-- <view class="cencel">取消预约</view> -->
            <view class="cencel" v-if="type === '试驾'">*请等待客服电话联系安排试驾时间</view>
          </view>
          <view class="icon_box">
            <uni-icons
            size="100rpx"
            color="#cc1d3a"
            type="icon-more"
            custom-prefix="iconfont2"
            ></uni-icons>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  name: 'InfoPanel',
  props: {
    title: String,
    type: String,
    testDriveList: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {}
  },
  methods: {
    goDetailPage(item, type) {
      // console.log(item);
      let itemStr = JSON.stringify(item)
      let url = `/pages/CarMaintain/BookingDetails?appoiInfo=${itemStr}`
      if (type === '试驾') url = `/pages/TestDrive/BookingTestDrive?appoiInfo=${itemStr}`
      uni.navigateTo({url: url,})
    },
  },
}
</script>

<style lang="scss" scoped>
.item_box {
  width: 94%;
  background: #fff;
  margin: 40rpx auto;
  padding: 30rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, 0.1);
  // box-shadow: $theme-shadow;
  .message {
    display: flex;
    width: 100%;
    border-bottom: 2rpx solid #eee;
    padding-bottom: 18rpx;
    overflow: hidden;
    .type {
      font-size: 24rpx;
      text-align: left;
      color: #9a9a9a;
      width: 50%;
    }
    .title {
      font-size: 28rpx;
      font-weight: 600;
      text-align: right;
      color: $klm-color;
      width: 50%;
    }
  }
  .main_content {
    width: 100%;
    display: flex;
    overflow: hidden;
    padding-top: 18rpx;
    .right_content {
      width: 80%;
      padding-right: 80rpx;
      .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #222;
        // margin: 12rpx 0;
        padding-bottom: 12rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .date {
        margin-top: 8rpx;
        padding: 0 10rpx;
        display: block;
        width: 286rpx;
        height: 44rpx;
        font-size: 24rpx;
        line-height: 46rpx;
        text-align: center;
        color: #fff;
        background: $klm-color;
        border-radius: 100rpx;
      }
      .cencel {
        padding-top: 32rpx;
        font-size: 24rpx;
        color: #9a9a9a;
      }
    }
    .icon_box {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>
